---
title: Adaptadores de Renderización Bajo Demanda
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import RecipeLinks from '~/components/RecipeLinks.astro';
import IntegrationsNav from '~/components/IntegrationsNav.astro';

Astro te permite elegir la **renderización bajo demanda** para algunas o todas tus páginas y endpoints. Esto también se conoce como **renderización en el lado del servidor (SSR)**: generar páginas HTML en el servidor cuando se solicitan y enviarlas al cliente. Un **adaptador** se utiliza para ejecutar tu proyecto en el servidor y manejar estas solicitudes.

Esta renderización bajo demanda te permite:
- Implementar sesiones para iniciar sesión en tu aplicación.
- Renderizar datos desde una llamada de API dinámicamente con `fetch()`. 
- Desplegar tu sitio en un servidor usando un *adaptador*.

Considera habilitar el renderizado en el lado del servidor bajo demanda en tu proyecto de Astro si necesitas lo siguiente:

- **Endpoints de API**: Crea páginas específicas que funcionan como endpoints de API para tareas como el acceso a bases de datos, la autenticación y la autorización, al tiempo que mantienen oculta la información confidencial del cliente.

- **Páginas protegidas**: Restringe acceso a una página según los privilegios del usuario, manejando el acceso del usuario en el servidor.

- **Contenido que cambia con frecuencia**: Genera páginas individuales sin necesidad de reconstruir estáticamente todo tu sitio. Esto es útil cuando el contenido de una página se actualiza con frecuencia.

## Adaptadores oficiales

Astro mantiene adaptadores oficiales para [Node.js](https://nodejs.org/), [Vercel](https://vercel.com/), [Netlify](https://www.netlify.com/) y [Cloudflare](https://www.cloudflare.com/).

Encuentra aún más [adaptadores mantenidos por la comunidad](https://astro.build/integrations/?search=&categories%5B%5D=adapters) (por ejemplo, Deno, SST, AWS) en nuestro directorio de integraciones.

<IntegrationsNav category="adapter"/>

## Habilita la renderización de servidor bajo demanda

Ambos modos de salida de renderización bajo demanda de Astro (`server` e `hybrid`) te permiten aprovechar el rendimiento de sitios estáticos al pre-renderizar rutas individuales siempre que sea posible, ya sea que tengas una aplicación completamente dinámica o un sitio en su mayoría estático que solo necesita renderización bajo demanda para rutas seleccionadas.

Para decidir cuál usar en tu proyecto, elige la opción `output` que represente cómo se renderizarán la **mayoría** de tus páginas y rutas:

- __`output: 'server'`__: Renderizado bajo demanda de forma predeterminada. Utiliza esto cuando la mayoría o toda tu página o aplicación deba renderizarse en el servidor según la solicitud. Cualquier página o endpoint individual puede *optar* por la pre-renderización.
- __`output: 'hybrid'`__: Pre-renderizado a HTML de forma predeterminada. Utiliza esto cuando la mayor parte de tu sitio debería ser estática. Cualquier página o enpoint individual puede *optar por no* pre-renderizarse.

Debido a que el servidor deberá generar al menos algunas páginas bajo demanda, ambos modos requieren que [agregues un adaptador](#añade-un-adaptador) para llevar a cabo las funciones del servidor.

### Añade un adaptador

Para desplegar un proyecto en modo `server` o `hybrid`, también debes agregar un **adaptador**. Esto se debe a que ambos modos requieren un _entorno de ejecución_ del servidor: el entorno que ejecuta código en el servidor para generar páginas cuando se solicitan. Cada adaptador permite a Astro generar un script que ejecuta tu proyecto en un entorno de ejecución específico, como Vercel, Netlify o Cloudflare.

Puedes encontrar tanto [adaptadores oficiales como de la comunidad en nuestro directorio de integraciones](https://astro.build/integrations/?search=&categories%5B%5D=adapters). Elige el que corresponda a tu [entorno de despligue](/es/guides/deploy/).

#### Instalación usando `astro add`

Puedes agregar cualquiera de los [adaptadores oficiales mantenidos por Astro](/es/guides/integrations-guide/#integraciones-oficiales) con el siguiente comando `astro add`. Esto instalará el adaptador y realizará los cambios apropiados en tu archivo `astro.config.mjs` en un solo paso.

Por ejemplo, para instalar el adaptador de Vercel, ejecuta:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add vercel
  ```
  </Fragment>
</PackageManagerTabs>

#### Instalación Manual

También puedes agregar un adaptador manualmente instalando el paquete y actualizando el archivo `astro.config.mjs` por ti mismo.

Por ejemplo, para instalar manualmente el adaptador de Vercel:

1. Instala el adaptador a las dependencias de tu proyecto usando tu gestor de paquetes preferido:

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/vercel
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/vercel
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/vercel
     ```
     </Fragment>
   </PackageManagerTabs>

2. [Agrega el adaptador](/es/reference/configuration-reference/#adapter) a tu archivo `astro.config.mjs` en la importación y exportación por defecto, junto con el modo de `output` que desees:

    ```js ins={3,7} {6}
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';

    export default defineConfig({
      output: 'server',
      adapter: vercel(),
    });
    ```

    Note that different adapters may also have different configuration settings. Read each adapter's documentation, and apply any necessary config options to your chosen adapter in `astro.config.mjs`

### Configura `server` o `hybrid`

Para habilitar la renderización bajo demanda, tienes que actualizar la configuración de tu `output` a uno de los dos modos renderizados en el servidor.

Por ejemplo, para configurar una aplicación altamente dinámica donde cada página se renderiza bajo demanda de forma predeterminada, agrega `output: 'server'` a tu configuración de Astro:

```js ins={5} title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import node from "@astrojs/node";

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: "standalone"
  })
});
```

### Optando por la pre-renderización en el modo `server`

Para una aplicación en su mayoría renderizada en el servidor configurada como `output: server`, agrega `export const prerender = true` a cualquier página o ruta para pre-renderizar una página estática o endpoint:

```astro title="src/pages/mypage.astro" {2}
---
export const prerender = true;
// ...
---
<html>
  <!-- Estático, página pre-renderizada aquí... -->
</html>
```

```mdx title="src/pages/mypage.mdx" {5}
---
layout: '../layouts/markdown.astro'
title: 'Mi página'
---
export const prerender = true;
# Esta es mi página estática, pre-renderizada
```

```js title="src/pages/myendpoint.js" {1}
export const prerender = true;

export async function GET() {
  return new Response(
    JSON.stringify({
      message: `Este es mi endpoint estático`,
    }),
  );
}
```

### Optando por no pre-renderizar en el modo `hybrid`

Para un sitio en su mayoría estático configurado como `output: hybrid`, agrega `export const prerender = false` a cualquier archivo que deba renderizarse en el servidor bajo demanda:

```js title="src/pages/randomnumber.js" {1}
export const prerender = false;

export async function GET() {
  let number = Math.random();
  return new Response(
    JSON.stringify({
      number,
      message: `Aquí tienes un numero aleatorio: ${number}`,
    }),
  );
}
```

## Características de renderización bajo demanda

### Transmisión de HTML

Con la transmisión de HTML, un documento se divide en fragmentos, se envía por la red en orden y se representa en la página en ese orden. En el modo `server` o `hybrid`, Astro utiliza la transmisión de HTML para enviar cada componente al navegador a medida que los renderiza. Esto garantiza que el usuario vea tu HTML lo más rápido posible, aunque las condiciones de red pueden hacer que se descarguen documentos grandes lentamente y esperar a que se completen las solicitudes de datos puede bloquear la representación de la página.

<RecipeLinks slugs={["es/recipes/streaming-improve-page-performance"]}/>

:::caution
Las características que modifican las [cabeceras de respuesta](https://developer.mozilla.org/en-US/docs/Glossary/Response_header) solo están disponibles a **nivel de página**. (No puedes usarlas dentro de componentes, incluidos los componentes de diseño). En el momento en que Astro ejecuta el código de tu componente, ya ha enviado las cabeceras de respuesta y no se pueden modificar.
:::

### Cookies

En los modos `server` e `hybrid`, una página o endpoint de API puede verificar, establecer, obtener y eliminar cookies.

El ejemplo a continuación actualiza el valor de una cookie para un contador de vistas de página:

```astro title="src/pages/index.astro" {4,5,9}
---
let counter = 0

if (Astro.cookies.has("counter")) {
  const cookie = Astro.cookies.get("counter")
	counter = cookie.number() + 1
}

Astro.cookies.set("counter",counter)
---
<html>
  <h1>Contador = {counter}</h1>
</html>
```

Consulta más detalles sobre [`Astro.cookies` y el tipo `AstroCookie`](/es/reference/api-reference/#astrocookies) en la referencia de la API.

### `Response`

También puedes devolver un [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) desde cualquier página utilizando la renderización bajo demanda.

El siguiente ejemplo devuelve un código 404 en una página dinámica después de buscar un ID en la base de datos:

```astro title="src/pages/[id].astro" {8-11}
---
import { getProduct } from '../api';

const product = await getProduct(Astro.params.id);

// Producto no encontrado
if (!product) {
  return new Response(null, {
    status: 404,
    statusText: 'No encontrado'
  });
}
---
<html>
  <!-- Maquetado aquí... -->
</html>
```

### `Request`

`Astro.request` es un objeto estándar [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request). Puede utilizarse para obtener la `url`, `headers`, `method`, e incluso el cuerpo de la solicitud.

En ambos modos `server` e `hybrid`, puedes acceder a información adicional de este objeto para páginas que no están generadas estáticamente.

#### `Astro.request.headers`

Las cabeceras de la solicitud están disponibles en `Astro.request.headers`. Esto funciona de manera similar a las [`Request.headers`](https://developer.mozilla.org/en-US/docs/Web/API/Request/headers) del navegador. Es un objeto [Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) donde puedes recuperar cabeceras como la cookie.

```astro title="src/pages/index.astro" {2}
---
const cookie = Astro.request.headers.get('cookie');
// ...
---
<html>
  <!-- Página aquí... -->
</html>
```

#### `Astro.request.method`

El método HTTP utilizado en la solicitud está disponible como `Astro.request.method`. Esto funciona de manera similar al [`Request.method`](https://developer.mozilla.org/en-US/docs/Web/API/Request/method) del navegador. Devuelve la representación de string del método HTTP utilizado en la solicitud.

```astro title="src/pages/index.astro"
---
console.log(Astro.request.method) // GET (cuando se navega en el navegador)
---
```

Consulta más detalles sobre [`Astro.request`](/es/reference/api-reference/#astrorequest) en la referencia de la API.

### Endpoints del Servidor

Un endpoint de servidor, también conocido como una **ruta de API**, es una función especial exportada desde un archivo `.js` o `.ts` dentro de la carpeta `src/pages/`. Una característica poderosa de la renderización en el lado del servidor bajo demanda, las rutas de API pueden ejecutar código de manera segura en el servidor.

La función toma un [contexto de endpoint](/es/reference/api-reference/#contexto-del-endpoint) y devuelve un [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response).

Para obtener más información, consulta nuestra [Guía de Endpoints](/es/guides/endpoints/#endpoints-del-servidor-rutas-de-api).
